<script setup>
import { ref, reactive, onMounted } from 'vue'
import { reqAllMenuList, reqAddOrUpdateMenu, reqRemoveMenu } from '@/api/acl/menu'
import { ElMessage } from 'element-plus';

let permisstionArr = ref()  // 保存所有菜单
let dialogVisible = ref(false)  // 用来控制 添加、编辑组件(dialog)的显示与隐藏
let menuData = reactive({  // 用来收集用户添加菜单时的数据
    code: '',
    level: 0,
    name: '',
    pid_id: 0,
    type_mold: '',
})
let type_mold = ref([{ code: 1, name: '路由' }, { code: 2, name: '按钮' }])  // 菜单类型
let siblingParams = reactive({  // 添加同级菜单时需要的参数
    sibling: false,
    pid_id: 0,
})
const getHasPermisstion = () => {
    reqAllMenuList().then(res => {
        if (res.data.code == 200) {
            permisstionArr.value = res.data.data
        }
    })
}

onMounted(() => {
    getHasPermisstion()
})

// 点击添加菜单按钮触发事件
const addPermisstion = (row) => {
    dialogVisible.value = true
    // 清空之前的数据
    Object.assign(menuData, {
        id: 0,
        code: '',
        level: 0,
        name: '',
        pid_id: 0,
        type_mold: '',
    })
    Object.assign(siblingParams, {
        sibling: false,
        pid_id: 0,
    })

    // 收集数据
    menuData.level = row.level + 1
    menuData.pid_id = row.id
    siblingParams.pid_id = row.pid_id
}
// 点击编辑按钮触发事件
const updatePermisstion = (row) => {
    dialogVisible.value = true
    // 清空之前的数据
    // Object.assign(siblingParams,{
    //     sibling:false,
    //     pid_id:0,
    // })

    // 收集已有的数据
    Object.assign(menuData, {
        id: row.id,
        code: row.code,
        level: row.level,
        name: row.name,
        pid_id: row.pid_id,
        type_mold: row.type_mold
    })
}
// 点击 添加或编辑菜单-dialog组件上面的 确定 按钮触发的事件
const save = () => {
    // 判断是否是添加同级菜单，如果是则要对数据进行处理
    if (!menuData.id && siblingParams.sibling) {
        console.log(siblingParams.sibling);
        menuData.level = menuData.level - 1
        menuData.pid_id = siblingParams.pid_id
    }
    reqAddOrUpdateMenu(menuData).then(res => {
        if (res.data.code == 200) {
            ElMessage({
                type: 'success',
                message: menuData.id ? '编辑成功' : '添加成功'
            })
            dialogVisible.value = false
            getHasPermisstion()
        } else {
            ElMessage({
                type: 'error',
                message: (menuData.id ? '编辑失败，' : '添加失败，') + res.data.msg
            })
        }
    })
}
// 点击 删除 按钮触发事件，删除菜单
const removeMenu = (row) => {
    reqRemoveMenu(row.id).then(res => {
        if (res.data.code == 200) {
            ElMessage({
                type: 'success',
                message: '删除成功'
            })
            getHasPermisstion()
        } else {
            ElMessage({
                type: 'error',
                message: '删除失败，' + res.data.msg
            })

        }
    })
}

</script>

<template>
    <div class="box">
        <!-- 展示菜单数据 -->
        <el-table :data="permisstionArr" style="width: 100%; margin-bottom: 20px" row-key="id" border>
            <el-table-column prop="name" label="名称" show-overflow-tooltip />
            <el-table-column prop="code" label="权限值" />
            <el-table-column prop="type_mold" label="类型" width="100px">
                <template #="{ row, $index }">
                    <p>{{ !row.type_mold ? '' : row.type_mold == 1 ? '路由' : '按钮' }}</p>
                </template>
            </el-table-column>
            <el-table-column prop="update_time" label="修改时间" show-overflow-tooltip />
            <el-table-column label="操作" width="280px">
                <template #="{ row, $index }">
                    <el-button v-has="`btn.Permission.add`" type="primary" size="small" icon="Plus" @click="addPermisstion(row)"
                        :disabled="row.level == 3 ? true : false">{{ row.level == 2 ? '添加功能' : '添加菜单' }}</el-button>
                    <el-button v-has="`btn.Permission.edit`" type="primary" size="small" icon="Edit" @click="updatePermisstion(row)"
                        :disabled="row.level == 1 ? true : false">编辑</el-button>
                    <el-popconfirm :title="`你确定要 ${row.name} 吗？`" width="260px" @confirm="removeMenu(row)">
                        <template #reference>
                            <el-button v-has="`btn.Permission.delete`" type="primary" size="small" icon="Delete"
                                :disabled="row.level == 1 ? true : false">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 添加或编辑菜单，dialog组件 -->
        <el-dialog v-model="dialogVisible" :title="menuData.id ? '编辑菜单' : '添加菜单'">
            <!-- <el-form :model="form" label-width="80px">
                <el-form-item label="名称">
                    <el-input placeholder="请输入权限名称" v-model="menuData.name"></el-input>
                </el-form-item>
                <el-form-item label="权限值">
                    <el-input placeholder="请输入权限值" v-model="menuData.code"></el-input>

                </el-form-item>
                <el-form-item label="菜单类型">
                    <el-select v-model="menuData.type_mold" placeholder="请选择菜单类型">
                        <el-option v-for="item in type_mold" :key="item.code" :label="item.name" :value="item.code" />
                    </el-select>
                </el-form-item>
                <el-form-item label="" v-if="!menuData.id">
                    <el-checkbox v-model="siblingParams.sibling" label="是否添加为同级菜单（默认为当前菜单的子菜单）" />
                </el-form-item>
                <el-form-item label="">
                    <p>{{ !menuData.type_mold ? `` : menuData.type_mold == 1 ? `路由的权限值一般是：路由名` : menuData.type_mold == 2 ?
                        `按钮的权限值一般是：btn.路由名.按钮名` : ` ` }}</p>
                </el-form-item>
            </el-form> -->


            <el-form label-width="80px">
                <el-form-item label="名称">
                    <el-input placeholder="请输入权限名称" v-model="menuData.name"></el-input>
                </el-form-item>
                <el-form-item label="权限值">
                    <el-input placeholder="请输入权限值" v-model="menuData.code"></el-input>

                </el-form-item>
                <el-form-item label="菜单类型">
                    <el-select v-model="menuData.type_mold" placeholder="请选择菜单类型">
                        <el-option v-for="item in type_mold" :key="item.code" :label="item.name" :value="item.code" />
                    </el-select>
                </el-form-item>
                <el-form-item label="" v-if="!menuData.id">
                    <el-checkbox v-model="siblingParams.sibling" label="是否添加为同级菜单（默认为当前菜单的子菜单）" />
                </el-form-item>
                <el-form-item label="">
                    <p>{{ !menuData.type_mold ? `` : menuData.type_mold == 1 ? `路由的权限值一般是：路由名` : menuData.type_mold == 2 ?
                        `按钮的权限值一般是：btn.路由名.按钮名` : ` ` }}</p>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="save">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<style scoped lang="scss">

</style>